 <%--
  Created by IntelliJ IDEA.
  User: 13585
  Date: 2020/12/23
  Time: 8:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="top.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会议室预约详情</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div id="details">
    <div class="operation">
        <div class="title">
            <span>${name}预约情况</span>
            <%--<span>
                <a href="#" class="btn btn-default">E1024</a>
                <a href="#" class="btn btn-default">E5024</a>
                <a href="#" class="btn btn-default">E5025</a>
            </span>--%>
        </div>
        <div class="date">
            <div class="date-left">
                <a id="previous" class="btn btn-default btn-left"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a><a
                    id="next" class="btn btn-default btn-right"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
                <a id="current" class="btn btn-default">今天</a>
            </div>
            <div class="date-center">
                <span id="datetime">${sessionScope.dateTime.date}</span>
            </div>
        </div>

    </div>
    <div class="date-table">
        <table class="table-bordered" <%--border="1px" cellspacing="0" cellpadding="0"--%>>
            <tr>
                <th></th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </tr>
            <tr class="inner">
                <td>
                    <table id="time" border="1"></table>
                </td>
                <td>
                    <table id="monday" border="1">

                    </table>
                </td>
                <td>
                    <table id="tuesday" border="1px">

                    </table>
                </td>
                <td>
                    <table id="wednesday" border="1px">

                    </table>
                </td>
                <td>
                    <table id="thursday" border="1px">

                    </table>
                </td>
                <td>
                    <table id="friday" border="1px">

                    </table>
                </td>
                <td>
                    <table id="saturday" border="1px">

                    </table>
                </td>
                <td>
                    <table id="sunday" border="1px">

                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    let week = 0;
    let today = 0;
    let previous = document.getElementById("previous");
    let next = document.getElementById("next");
    let current = document.getElementById("current");
    let span = document.getElementById("datetime")

    previous.onclick = function () {
        week = week - 1
        dateTime(week);
    }
    next.onclick = function () {
        week = week + 1;
        dateTime(week);
    }
    current.onclick = function () {
        week = 0;
        dateTime(week);
    }

    function dateTime(week) {
        let ajax;
        if(window.XMLHttpRequest){
            ajax = new XMLHttpRequest();
        }else {
            ajax = new ActiveXObject("Microsoft.XMLHttp");
        }
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4 && ajax.status == 200){
                let result = ajax.responseText;
                span.innerHTML = result;
                applyDisplay(${mid});
            }
        }
        ajax.open("GET","dateTime?num="+week);
        ajax.send();
    }

    function applyDisplay(id){
        let ajax3;
        let div = document.getElementsByClassName("date-table")[0];
        if(window.XMLHttpRequest){
            ajax3 = new XMLHttpRequest();
        }else {
            ajax3 = new ActiveXObject("Microsoft.XMLHttp");
        }
        ajax3.onreadystatechange = function(){
            if(ajax3.readyState == 4 && ajax3.status == 200){
                let json = ajax3.responseText;
                let ajaxBean = JSON.parse(json);
                // console.log(ajaxBean);
                let map = ajaxBean.map;
                let datetime = ajaxBean.dateTime;



                let time = document.getElementById("time");
                let monday = document.getElementById("monday");
                let tuesday = document.getElementById("tuesday");
                let wednesday = document.getElementById("wednesday");
                let thursday = document.getElementById("thursday");
                let friday = document.getElementById("friday");
                let saturday = document.getElementById("saturday");
                let sunday = document.getElementById("sunday");
                time.innerHTML = "";
                for (let i = 8;i < 22;){
                    let tr = document.createElement("tr");
                    let td = document.createElement("td");
                    if (parseInt(i) == i){
                        if (i < 10){
                            td.innerHTML = "0"+i+":00";
                        }else {
                            td.innerHTML = i+":00";
                        }
                    }
                    tr.append(td);
                    time.append(tr);
                    i += 0.5;
                }
                let element = [monday,tuesday,wednesday,thursday,friday,saturday,sunday];
                let value = [datetime.monday,datetime.tuesday,datetime.wednesday,datetime.thursday,datetime.friday,datetime.saturday,datetime.sunday]
                console.log(value);
                for (let j = 0;j < 7;j++){
                    let elem = element[j];
                    elem.innerHTML = "";
                    for (let i = 8;i < 22;){
                        let tr = document.createElement("tr");
                        let td = document.createElement("td");
                        td.style.position = "relative";
                        let div = document.createElement("div");
                        if (parseInt(i) == i){
                            if (i < 10){
                                // console.log(value[j]+" 0"+i+":00");
                                if (map[value[j]+" 0"+i+":00"]){
                                    div.className = map[value[j]+" 0"+i+":00"].style;
                                    div.style.height = map[value[j]+" 0"+i+":00"].height*30+"px";
                                    div.style.position = "absolute";
                                    div.style.top = "0";
                                    div.style.width = "100%";
                                    div.innerHTML = map[value[j]+" 0"+i+":00"].time + "</br>" + map[value[j]+" 0"+i+":00"].title;
                                }
                            }else {
                                if (map[value[j]+" "+i+":00"]){
                                    div.className = map[value[j]+" "+i+":00"].style;
                                    div.style.height = map[value[j]+" "+i+":00"].height*30+"px";
                                    div.style.position = "absolute";
                                    div.style.top = "0";
                                    div.style.width = "100%";
                                    div.innerHTML = map[value[j]+" "+i+":00"].time + "</br>" + map[value[j]+" "+i+":00"].title;
                                }
                            }
                        }
                        td.append(div)
                        tr.append(td);
                        elem.append(tr);
                        i += 0.5;
                    }
                }
            }
        }
        ajax3.open("GET","applyDisplay?id="+id);
        ajax3.send();
    }
    dateTime(0);
    <%--applyDisplay(${mid});--%>

</script>

</body>
</html>
